<nz-card>
  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    基本信息
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>标题</nz-form-label>
      <nz-form-control nzFlex="400px">
        <input
          nz-input
          maxlength="50"
          placeholder="请输入标题"
          [(ngModel)]="formParams.name"
          [disabled]="setDisabled()"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>状态</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.status" [nzDisabled]="setDisabled()">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>水印图片</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-upload
          [(ngModel)]="formParams.img"
          [limitParams]="{
            nzFileType: '.png,.gif'
          }"
          [beforeUpload]="imageBeforeUpload"
          [disabled]="setDisabled()"
        ></zdy-upload>

        <p class="img-tip">
          仅支持png或gif格式文件，请必须上传正方形图片
        </p>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth">备注</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-textarea-count [nzMaxCharacterCount]="100">
          <textarea
            rows="4"
            nz-input
            maxlength="100"
            placeholder="仅内部可见"
            [(ngModel)]="formParams.remark"
            [disabled]="setDisabled()"
          ></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用范围
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>生效时间</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-range-picker
          style="width: 100%;"
          [nzShowTime]="true"
          [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
          nzFormat="yyyy-MM-dd HH:mm:ss"
          [(ngModel)]="takeEffectDates"
          [nzDisabled]="setDisabled()"
          (ngModelChange)="dateChange($event, ['useBeginTime', 'useEndTime'])"
        ></nz-range-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用用户</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.userType" [nzDisabled]="setDisabled()">
          <label nz-radio [nzValue]="0">不限制</label>
          <label nz-radio [nzValue]="1">C端</label>
          <label nz-radio [nzValue]="2">B端</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用商品
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>指定分类</nz-form-label>
      <nz-form-control nzFlex="1">
        <div class="appoint-label">
          <label
            nz-checkbox
            [(ngModel)]="classifyAll"
            [nzDisabled]="classifyBrandNotAll || setDisabled()"
            (ngModelChange)="classifyAllChange($event)"
          >全选</label>
  
          <label
            nz-checkbox
            [(ngModel)]="classifyBrandNotAll"
            [nzDisabled]="setDisabled()"
            (ngModelChange)="classifyNotAllChange($event)"
          >全不选</label>
        </div>
  
        <div class="classify-tree-wrap" *ngFor="let item of classifyTreeDatas">
          <label class="classify-tree-label">{{ item.name }}</label>
          <div class="classify-tree-control">
            <nz-checkbox-group
              [(ngModel)]="item.children"
              [nzDisabled]="classifyBrandNotAll || setDisabled()"
              (ngModelChange)="updateSingleChecked()"
            ></nz-checkbox-group>
          </div>
        </div>
      </nz-form-control>
    </nz-form-item>
  
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>指定品牌</nz-form-label>
      <nz-form-control nzFlex="1">
        <div class="appoint-label">
          <label
            nz-checkbox
            [(ngModel)]="brandAll"
            [nzDisabled]="classifyBrandNotAll || setDisabled()"
            (ngModelChange)="brandAllChange($event)"
          >全选</label>
  
          <label
            nz-checkbox
            [(ngModel)]="classifyBrandNotAll"
            [nzDisabled]="setDisabled()"
            (ngModelChange)="classifyNotAllChange($event)"
          >全不选</label>
        </div>
  
        <zdy-checkbox-group
          *ngIf="brandOptions.length"
          [checkOptions]="brandOptions"
          [checkKeys]="{
            key: 'id',
            label: 'name'
          }"
          [isAllCheck]="false"
          [disabled]="classifyBrandNotAll || setDisabled()"
          [(ngModel)]="brandSelected"
          (singCheckedChange)="brandSingCheckedChange()"
        ></zdy-checkbox-group>
      </nz-form-control>
    </nz-form-item>
  
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth">追加可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        <span class="p-r-8">
          已选 <b style="color: #F56C6C;">{{ appendGoodIds.length || 0 }}</b> 个商品
        </span>
  
        <button
          nz-button
          nzType="link"
          nzSize="small"
          [disabled]="!appendGoodIds.length"
          (click)="showSelectedGoodModal(1)"
        >查看</button>
  
        <button
          nz-button
          nzType="link"
          nzSize="small"
          [disabled]="setDisabled()"
          (click)="showGoodsMoreModal(1, excludeGoodIds)"
        >选择更多</button>
      </nz-form-control>
    </nz-form-item>
  
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth">排除可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        <span class="p-r-8">
          已选 <b style="color: #F56C6C;">{{ excludeGoodIds.length || 0 }}</b> 个商品
        </span>
        
        <button
          nz-button
          nzType="link"
          nzSize="small"
          [disabled]="!excludeGoodIds.length"
          (click)="showSelectedGoodModal(2)"
        >查看</button>
  
        <button
          nz-button
          nzType="link"
          nzSize="small"
          [disabled]="setDisabled()"
          (click)="showGoodsMoreModal(2, appendGoodIds)"
        >选择更多</button>
      </nz-form-control>
    </nz-form-item>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="['0', '1'].includes(routeParams.type) && permission.userPermission.has('goods:watermark:update')"
      nz-button
      nzType="primary"
      [nzLoading]="subformLoading"
      (click)="submitData()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      class="m-l-10"
      (click)="back()"
    >返回</button>

    <button
      *ngIf="['1', '2'].includes(routeParams.type)"
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="showConflictModal()"
    >水印冲突验证</button>
  </div>
</nz-card>

<!-- S 选择商品 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1000"
  [nzFooter]="null"
  [(nzVisible)]="selectGoodVisible"
  [nzTitle]="'选择商品'"
  (nzOnCancel)="selectGoodVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="good-search-wrap">
        <input
          style="width: 220px;"
          nz-input
          placeholder="请输入商品编号或名称"
          [(ngModel)]="selectGoodTable.name"
        />

        <button
          nz-button
          nzType="primary"
          class="m-l-10"
          (click)="queryGoodsData()"
        >查询</button>

        <button
          nz-button
          nzType="default"
          class="m-l-10"
          (click)="resetGoodsData()"
        >重置</button>

        <button
          nz-button
          nzType="primary"
          class="m-l-20"
          (click)="subRelationGood()"
        >关联已选商品{{ setOfCheckedId.size }}</button>
      </div>

      <div class="p-t-10">
        <nz-table
          #goodsTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="selectGoodTable.loading"
          [nzData]="selectGoodTable.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="selectGoodTable.total"
          [nzPageIndex]="selectGoodTable.page"
          [nzPageSize]="selectGoodTable.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
          (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
        >
          <thead>
            <tr>
              <th
                [(nzChecked)]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="onAllChecked($event)"
              ></th>
              <th nzAlign="center">ID</th>
              <th nzAlign="center">商品</th>
              <th nzAlign="center">销量</th>
              <th nzAlign="center">销售库存</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of goodsTable.data; let index = index;">
              <td
                [nzDisabled]="disabledCheckId.includes(data.id)"
                [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="onItemChecked(data.id, $event)"
              ></td>
              <!-- ID -->
              <td nzAlign="center">{{ data.id }}</td>
              <!-- 商品 -->
              <td nzAlign="center">{{ data.name || '-' }}</td>
              <!-- 销量 -->
              <td nzAlign="center">{{ data.salesVolume || '0' }}</td>
              <!-- 销售库存 -->
              <td nzAlign="center">{{ data.stockNum || '0' }}</td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 选择商品 Modal -->

<!-- S 查看商品 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1000"
  [nzFooter]="null"
  [(nzVisible)]="lookGoodsVisible"
  [nzTitle]="'查看商品'"
  (nzOnCancel)="lookGoodsVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="p-t-10">
        <nz-table
          #goodsLookTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="lookGoodsTable.loading"
          [nzData]="lookGoodsTable.tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="lookGoodsTable.total"
          [nzPageIndex]="lookGoodsTable.page"
          [nzPageSize]="lookGoodsTable.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChangeTwo($event)"
          (nzPageSizeChange)="onPageSizeChangeTwo($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center">ID</th>
              <th nzAlign="center">商品</th>
              <th nzAlign="center">销量</th>
              <th nzAlign="center">销售库存</th>
              <th nzAlign="center">操作</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of goodsLookTable.data; let index = index;">
              <!-- ID -->
              <td nzAlign="center">{{ data.id }}</td>
              <!-- 商品 -->
              <td nzAlign="center">{{ data.name || '-' }}</td>
              <!-- 销量 -->
              <td nzAlign="center">{{ data.salesVolume || '0' }}</td>
              <!-- 销售库存 -->
              <td nzAlign="center">{{ data.stockNum || '0' }}</td>
              <!-- 操作 -->
              <td nzAlign="center">
                <button
                  nz-button
                  nzType="link"
                  nzSize="small"
                  nzDanger
                  [disabled]="setDisabled()"
                  (click)="deleteGoodItem(data)"
                >删除</button>
              </td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 查看商品 Modal -->

<!-- S 水印冲突验证 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1200"
  [nzFooter]="null"
  [(nzVisible)]="isConflictVisible"
  [nzTitle]="'水印冲突验证'"
  (nzOnCancel)="isConflictVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="conflict-modal-title">
        根据【水印状态、适用用户、生效时间、商品范围】判断，可能冲突的水印如下：
        <span>（仅判断状态 = 启用的水印信息）</span>
      </p>

      <div class="p-t-10">
        <nz-table
          #conflictTable
          nzSize="small"
          nzBordered
          [nzShowPagination]="false"
          [nzData]="conflictTableData">
          <thead>
            <tr>
              <th nzAlign="center">水印ID</th>
              <th nzAlign="center">水印状态</th>
              <th nzAlign="center">水印名称</th>
              <th nzAlign="center">适用用户</th>
              <th nzAlign="center">生效时间</th>
              <th nzAlign="center">冲突商品</th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="let data of conflictTable.data; let index = index;"
              [ngStyle]="{
                'color': index === 0 ? '#F56C6C' : ''
              }">
              <!-- 水印ID -->
              <td nzAlign="center">
                {{ index === 0 ? '当前' : data.id }}
              </td>
              <!-- 水印状态 -->
              <td nzAlign="center">
                <ng-container [ngSwitch]="data.status">
                  <span style="color: #F56C6C;" *ngSwitchCase="0">禁用</span>
                  <span style="color: #67C23A;" *ngSwitchCase="1">启用</span>
                  <span *ngSwitchDefault>-</span>
                </ng-container>
              </td>
              <!-- 水印名称 -->
              <td nzAlign="center">
                <ng-container *ngIf="index === 0; else elseLkTemplate">
                  {{ data.name }}
                </ng-container>
                <ng-template #elseLkTemplate>
                  <a
                    nz-button
                    nzType="link"
                    nzSize="small"
                    target="_blank"
                    routerLink="/goods/goods-watermark-edit"
                    [queryParams]="{id: data.id, type: 2}"
                  >{{ data.name }}</a>
                </ng-template>
              </td>
              <!-- 适用用户 -->
              <td nzAlign="center">
                <ng-container [ngSwitch]="data.userType">
                  <nz-tag *ngSwitchCase="0">通用</nz-tag>
                  <nz-tag *ngSwitchCase="1" [nzColor]="'#87d068'">C端</nz-tag>
                  <nz-tag *ngSwitchCase="2" [nzColor]="'#2db7f5'">B端</nz-tag>
                  <span *ngSwitchDefault>-</span>
                </ng-container>
              </td>
              <!-- 生效时间 -->
              <td nzAlign="center">
                <ng-container *ngIf="data.useBeginTime; else elseTimeTemplate">
                  {{ data.useBeginTime }} ~ {{ data.useEndTime }}
                </ng-container>
                <ng-template #elseTimeTemplate>-</ng-template>
              </td>
              <!-- 冲突商品 -->
              <td nzAlign="left">
                <ng-container *ngIf="index !== 0 && data?.goods?.length; else elseGooTemplate">
                  <p *ngFor="let item of data.goods">
                    <a
                      class="good-alink"
                      target="_blank"
                      [routerLink]="['/goods/goodsTabs', item.id]"
                    >[{{ item.id }}] {{ item.name }}</a>
                  </p>
                </ng-container>
                <ng-template #elseGooTemplate>
                  -
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 水印冲突验证 Modal -->